<template>
  <div class="notice-list">
    <Row class="margin-top-10">
      <p class="find" style="margin-bottom: 20px">
        <b class="notice-list__title">通知管理</b>
        <Input
          class="notice-list__input"
          v-model="searchStr"
          placeholder="试试搜索通知关键字"
          clearable
        />
        <Button type="primary" @click="findData">查询</Button>
        <Button class="right" type="success" @click="handleAdd"
          >新增通知</Button
        >
      </p>
      <Table :columns="columns" :data="datas" :loading="loading"></Table>
      <Page
        class="pager"
        v-if="total > 0"
        :total="total"
        show-total
        show-elevator
        show-sizer
        :page-size="limit"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      />
    </Row>
  </div>
</template>

<script>
import http from "@/utils/http";
import moment from "moment";
import ImagePreview from "@/components/uploader/components/ImagePreview";
// 默认数据
const DEFAULT_DATA = {
  img_url: "",
  background: "",
  url: "",
  url_params: {},
  des: "",
  show: true,
};
// 模块名称
const NAME = "通知";
const MODULE = "notice";
const defaultPreviewImg = 'https://file.lantingshucheng.com/2021-03-06-22-35-48.png';

export default {
  name: MODULE,

  components: {
    [ImagePreview.name]: ImagePreview,
  },

  data() {
    return {
      loading: true,
      searchStr: "",
      datas: [],
      total: 0,
      page: 1,
      limit: 10,
      columns: [
        {
          title: "序号",
          key: "index",
          width: 80,
          align: "center",
        },
        {
          title: "标题",
          align: "center",
          key: "title",
          width: 200,
        },
        {
          title: "类型",
          align: "center",
          key: "type",
          width: 120,
          minWidth: 120,
          render: (h, params) => {
            let name = "";
            switch (params.row.type) {
              case "system":
                name = "系统消息";
                break;
              case "update":
                name = "书籍更新";
                break;
              default:
                name = params.row.type;
            }
            return h("Tag", name);
          },
        },
        {
          title: "大图",
          align: "center",
          width: 240,
          render: (h, params) => {
            return (
              <ImagePreview
                src={params.row.previewImg || defaultPreviewImg}
                width="200px"
                height="80px"
                style="margin: 6px  auto"
                has-remove={false}
              />
            );
          },
        },
        {
          title: "内容",
          align: "center",
          key: "preview",
          render: (h, params) => {
            return <span class="two-row-ellipsis">{params.row.preview}</span>;
          },
        },
        {
          title: "用户",
          align: "center",
          key: "user",
          render: (h, params) => {
            let name = "";
            switch (params.row.user) {
              case "all":
                name = "全部用户";
                break;
              case "ios":
                name = "全部苹果用户";
                break;
              case "android":
                name = "全部安卓用户";
                break;
              default:
                name = params.row.user;
            }
            return h("Tag", name);
          },
          width: 180,
        },
        {
          title: "描述",
          align: "center",
          key: "description",
          ellipsis: true,
          render: (h, params) => {
            return h("span", params.row.description || "无");
          },
        },
        {
          title: "创建时间",
          align: "center",
          key: "create_time",
          render: (h, params) => {
            return h(
              "span",
              moment(params.row.create_time).format("YYYY/MM/DD HH:MM:SS")
            );
          },
          width: 150,
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          key: "handle",
          render: (h, params) => {
            return (
              <div>
                <Button
                  type="primary"
                  size="small"
                  class="text-red"
                  onClick={() => {
                    this.$router.push({
                      path: `/notice-manage/detail/${params.row._id}`,
                    });
                  }}
                >
                  修改
                </Button>
                <Button
                  type="error"
                  size="small"
                  class="text-red"
                  onClick={() => this.handleDelete(params.row)}
                >
                  删除
                </Button>
              </div>
            );
          },
        },
      ],
    };
  },
  methods: {
    // 获取数据
    getData() {
      this.loading = true;
      http({
        method: "GET",
        url: `/api/admin/${MODULE}`,
        params: {
          page: this.page,
          limit: this.limit,
          search: this.searchStr,
        },
        operation: `获取${NAME}`,
      }).then((res) => {
        this.loading = false;
        if (res.data && res.ok) {
          this.datas = res.data.list.map((item, index) => {
            item.index = (this.page - 1) * this.limit + index + 1;
            return item;
          });
          this.total = res.data.total;
        }
      });
    },
    // 查找数据
    findData() {
      this.limit = 10;
      this.page = 1;
      this.total = 0;
      this.getData();
    },
    // 打开新增弹窗
    handleAdd() {
      this.$router.push({
        path: `/notice-manage/detail/0`,
      });
    },
    // 删除数据
    handleDelete(item) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: `确定要删除此${NAME}？`,
        onOk: () => {
          http({
            method: "DELETE",
            url: `/api/admin/${MODULE}/${item._id}`,
            operation: `删除${NAME}`,
          }).then((res) => {
            if (res.data && res.ok) {
              // 更新datas
              this.showModal = false;
              this.$Message.success(`删除${NAME}成功`);
              this.getData();
            }
          });
        },
        onCancel: () => {},
      });
    },
    // 点击分页
    handlePageChange(val) {
      this.page = val;
      this.getData();
    },
    handlePageSizeChange(size) {
      this.limit = size;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss">
.notice-list {
  &__title {
    font-size: 16px;
  }

  &__input {
    display: inline-block;
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .right {
    float: right;
  }
  .add-icon {
    float: right;
  }
  .overflow-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ivu-tooltip-inner {
    max-width: inherit;
  }
  .change-btn {
    margin-right: 15px;
  }
  .pager {
    text-align: right;
    margin-top: 30px;
  }
}

.common-dialog textarea.ivu-i-input {
  font-size: 12px !important;
}
</style>
